<template>
<div class="registered">
  <!-- 头部 -->
  <van-nav-bar
    title="绑定手机"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />
  <!-- form表单 -->
  <van-form @submit="onSubmit">
    <van-field
      v-model="state.username"
      name="用户名"
      label=""
      placeholder="请输入手机号"
      :rules="[{ required: true, message: '请填写用户名' }]"
    />
    <van-field
      v-model="state.password"
      type="password"
      name="密码"
      label=""
      placeholder="请输入验证码"
      class="passwordimg"
      :rules="[{ required: true, message: '请填写密码' }]"
    /> 
    <div style="margin: 16px;position: relative;">
      <van-button round type="primary"  style=" height: 30px;font-size: 0.32rem;position: absolute; top:calc(-100% - 20px);
  right: 0px;">获取验证码</van-button>
      <van-button round block type="primary" native-type="submit">
        登录
      </van-button>
    </div>
  </van-form>
 
</div>
</template>
<script>
//表单验证需要的组件
import { ref } from 'vue';
export default {
  setup() {
    //头部点击左侧按钮
    const onClickLeft = () => {
      console.log(123);
    };
    //表单验证的
    const state = ref({
      username: '',
      password: '',
    });
    const onSubmit = (values) => {
      console.log('submit', values);
    };
    return {
      onClickLeft, onSubmit,state,
    };
  },
};
</script>

<style >
.registered .van-field__body{
  border-bottom: 1px solid #ccc;padding: 0px;
  position: relative;
}
 
.registered  .van-cell{
 overflow: visible;
 margin-top: 10px;
  background: url(../../assets/img/手机@2x.png) no-repeat 18px center;
  background-size: 10px;
}
.registered .passwordimg{
  background: url(../../assets/img/密码@2x.png) no-repeat 18px center;
  background-size: 10px;
}
.registered .van-field__error-message{
  position: absolute;
  bottom: -24px;
}
 .registered .van-form{
  padding: 30% 40px 0px;
 
}
.registered .van-button{
  background-color: #4cc79b;
  border: none;
}
.registered .van-field__control{
  padding: 0px 20px;
}

</style>